<template>
  <el-container class="agent-detail">
    <el-main>
      <el-scrollbar height="100%">
        <div class="agent-content">
          <el-row :gutter="20">
            <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div class="grid-content user-content">
                <div class="title sa-flex sa-row-between">
                  <span>分销商信息</span>
                  <span class="refresh sa-flex" @click="getDetail">
                    <el-icon class="sa-m-r-4">
                      <RefreshRight />
                    </el-icon>
                    刷新
                  </span>
                </div>
                <div class="avatar sa-flex sa-row-center sa-m-b-16">
                  <sa-image
                    v-if="state.detailData.user"
                    :url="state.detailData.user.avatar"
                    size="80"
                    radius="40"
                  ></sa-image>
                </div>
                <div class="nickname sa-flex sa-row-center">
                  {{
                    state.detailData.user
                      ? state.detailData.user.nickname
                      : state.detailData.user_id
                  }}
                </div>
                <el-form class="user-form" size="small" label-position="right" label-width="76px">
                  <el-form-item label="分销商状态:">
                    <el-dropdown
                      popper-class="agent-popover"
                      trigger="click"
                      @command="onChangeStatus"
                    >
                      <span
                        class="status"
                        :style="{
                          color: statusList[state.detailData.status]?.color,
                        }"
                      >
                        {{ state.detailData.status_text }}
                        <el-icon class="sa-m-l-12"><ArrowDown /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            class="status"
                            :style="{
                              color: value.color,
                            }"
                            v-for="(value, key) in statusList"
                            :key="key"
                            :command="key"
                            >{{ value.label }}</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-form-item>
                  <el-form-item label="分销等级:">
                    <template v-if="state.detailData.level_info">
                      <div>{{ state.detailData.level_info.name }}</div>
                      <div>(等级{{ state.detailData.level_info.level }})</div>
                    </template>
                    <template v-if="!state.detailData.level_info">
                      {{ state.detailData.level }}
                    </template>
                    <el-button
                      v-auth="'shop.admin.commission.agent.edit'"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="onChangeLevel"
                      >更换</el-button
                    >
                  </el-form-item>
                  <el-form-item label="待升级等级:" v-if="state.detailData.level_status > 0">
                    <div v-if="state.detailData.level_status_info">
                      {{ state.detailData.level_status_info.name }}
                    </div>
                    <div>(等级{{ state.detailData.level_status || '-' }})</div>
                    <el-button
                      v-auth="'shop.admin.commission.agent.edit'"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="
                        onEdit(state.detailData.user_id, {
                          level_status: state.detailData.level_status,
                        })
                      "
                      >同意</el-button
                    >
                    <el-button
                      v-auth="'shop.admin.commission.agent.edit'"
                      class="is-link"
                      type="danger"
                      @click="
                        onEdit(state.detailData.user_id, {
                          level_status: 0,
                        })
                      "
                      >拒绝</el-button
                    >
                  </el-form-item>
                  <el-form-item label="上级分销商:">
                    <sa-user-profile
                      type="agent"
                      :user="state.detailData.user?.parent_user"
                      :id="state.detailData.user?.parent_user_id"
                      :isAvatar="false"
                    />
                    <el-button
                      v-auth="[
                        'shop.admin.commission.agent.changeparentuser',
                        'user.admin.user.detail',
                      ]"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="onChangeParentAgent"
                      >更换</el-button
                    >
                  </el-form-item>
                  <el-form-item label="佣金比例:">
                    <div class="commission-item">
                      <div class="title">一级(自购)</div>
                      <div>
                        {{
                          state.detailData.level_info
                            ? state.detailData.level_info.commission_rules.commission_1
                            : '0.00'
                        }}%
                      </div>
                    </div>
                    <div class="commission-item">
                      <div class="title">二级</div>
                      <div>
                        {{
                          state.detailData.level_info
                            ? state.detailData.level_info.commission_rules.commission_2
                            : '0.00'
                        }}%
                      </div>
                    </div>
                    <div class="commission-item">
                      <div class="title">三级</div>
                      <div>
                        {{
                          state.detailData.level_info
                            ? state.detailData.level_info.commission_rules.commission_3
                            : '0.00'
                        }}%
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="允许升级:">
                    <el-switch
                      v-model="state.detailData.upgrade_lock"
                      :active-value="0"
                      :inactive-value="1"
                      @change="
                        state.detailData.user_id
                          ? onEdit(state.detailData.user_id, {
                              upgrade_lock: state.detailData.upgrade_lock,
                            })
                          : ''
                      "
                    />
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div class="grid-content apply-content">
                <el-form class="apply-form" size="small" label-position="right" label-width="76px">
                  <div class="title sa-flex sa-row-between">
                    <span>申请信息</span>
                    <div>
                      <el-button
                        v-if="!state.applyInfoFlag"
                        v-auth="'shop.admin.commission.agent.edit'"
                        class="is-link"
                        type="primary"
                        @click="state.applyInfoFlag = true"
                        >编辑</el-button
                      >
                      <div v-if="state.applyInfoFlag" class="sa-flex">
                        <el-button class="is-link" type="danger" @click="onCancelApplyInfo">
                          取消
                        </el-button>
                        <el-button class="is-link" type="primary" @click="onSaveApplyInfo"
                          >保存</el-button
                        >
                      </div>
                    </div>
                  </div>
                  <template v-for="(ai, aindex) in state.applyInfo" :key="ai">
                    <el-form-item :label="`${ai.name}:`">
                      <div class="sa-flex sa-col-top">
                        <template v-if="ai.type == 'text' || ai.type == 'number'">
                          <el-input
                            v-if="state.applyInfoFlag"
                            class="sa-w-140"
                            v-model="ai.value"
                          ></el-input>
                          <template v-if="!state.applyInfoFlag">
                            {{ ai.value }}
                          </template>
                        </template>
                        <sa-image v-if="ai.type == 'image'" :url="ai.value"></sa-image>
                        <el-button
                          v-if="state.applyInfoFlag"
                          class="is-link sa-delete sa-m-l-12"
                          type="danger"
                          size="small"
                          @click="onDeleteApplyInfo(aindex)"
                        >
                          删除
                        </el-button>
                      </div>
                    </el-form-item>
                  </template>
                </el-form>
              </div>
            </el-col>
            <el-col class="sa-col-24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-row class="grid-content dashboard-content">
                <el-col :span="24">
                  <div class="title sa-flex">
                    <span>团队统计</span>
                    <el-button
                      v-auth="'shop.admin.commission.agent.team'"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="onViewTeam"
                      >查看团队</el-button
                    >
                  </div>
                  <el-row>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">团队人数：</div>
                      <div class="content">
                        {{ state.detailData.child_user_count_all }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">一级团队人数：</div>
                      <div class="content">
                        {{ state.detailData.child_user_count_1 }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">二级团队人数：</div>
                      <div class="content">
                        {{ state.detailData.child_user_count_2 }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">
                        团队分销商人数：
                        <el-popover placement="top" trigger="hover">
                          <div
                            v-for="(value, key) in state.detailData.child_agent_level_all"
                            :key="key"
                          >
                            等级{{ key }}：{{ value }}人
                          </div>
                          <template #reference>
                            <div class="sa-flex">
                              <el-icon v-if="state.detailData.child_agent_count_all" class="warning"
                                ><Warning
                              /></el-icon>
                            </div>
                          </template>
                        </el-popover>
                      </div>
                      <div class="content">
                        {{ state.detailData.child_agent_count_all }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">
                        一级分销商人数：
                        <el-popover placement="top" trigger="hover">
                          <div
                            v-for="(value, key) in state.detailData.child_agent_level_1"
                            :key="key"
                          >
                            等级{{ key }}：{{ value }}人
                          </div>
                          <template #reference>
                            <div class="sa-flex">
                              <el-icon v-if="state.detailData.child_agent_count_1" class="warning"
                                ><Warning
                              /></el-icon>
                            </div>
                          </template>
                        </el-popover>
                      </div>
                      <div class="content">
                        {{ state.detailData.child_agent_count_1 }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">二级分销商人数：</div>
                      <div class="content">
                        {{ state.detailData.child_agent_count_2 }}
                        <span class="unit">人</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <div class="title sa-flex">
                    <span>业绩统计</span>
                  </div>
                  <el-row>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">团队分销总金额：</div>
                      <div class="content">
                        {{ state.detailData.child_order_money_all }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">一级分销总金额：</div>
                      <div class="content">
                        {{ state.detailData.child_order_money_1 }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">二级分销总金额：</div>
                      <div class="content">
                        {{ state.detailData.child_order_money_2 }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">
                        自购分销总金额：
                        <el-popover
                          popper-class="sa-popper"
                          placement="top"
                          trigger="hover"
                          content="分销商自购分销商品金额统计"
                        >
                          <template #reference>
                            <div class="sa-flex">
                              <el-icon class="warning"><Warning /></el-icon>
                            </div>
                          </template>
                        </el-popover>
                      </div>
                      <div class="content">
                        {{ state.detailData.child_order_money_0 }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">团队分销订单：</div>
                      <div class="content">
                        {{ state.detailData.child_order_count_all }}
                        <span class="unit">单</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">一级分销订单：</div>
                      <div class="content">
                        {{ state.detailData.child_order_count_1 }}
                        <span class="unit">单</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">二级分销订单：</div>
                      <div class="content">
                        {{ state.detailData.child_order_count_2 }}
                        <span class="unit">单</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="label">
                        自购分销订单：
                        <el-popover
                          popper-class="sa-popper"
                          placement="top"
                          trigger="hover"
                          content="分销商自购分销订单数量统计"
                        >
                          <template #reference>
                            <div class="sa-flex">
                              <el-icon class="warning"><Warning /></el-icon>
                            </div>
                          </template>
                        </el-popover>
                      </div>
                      <div class="content">
                        {{ state.detailData.child_order_count_0 }}
                        <span class="unit">单</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <div class="title sa-flex">
                    <span>资产信息</span>
                  </div>
                  <el-row>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">累计佣金：</div>
                      <div class="content">
                        {{ state.detailData.total_income }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">待入账佣金：</div>
                      <div class="content">
                        {{ state.detailData.pending_reward }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                    <el-col class="item" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                      <div class="label">消费金额：</div>
                      <div class="content">
                        {{ state.detailData.user?.total_consume || 0 }}
                        <span class="unit">元</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <!-- 表格 -->
        <div class="agent-table">
          <el-tabs v-model="tabs.current" @tab-change="onChangeTabsCurrent">
            <el-tab-pane label="分销动态" name="log"></el-tab-pane>
            <el-tab-pane label="分销订单" name="order"></el-tab-pane>
            <el-tab-pane label="佣金明细" name="reward"></el-tab-pane>
          </el-tabs>
          <component :is="`${tabs.current}-table`" :data="tabs.tableData" />
          <div class="sa-flex sa-row-right sa-m-t-20">
            <sa-pagination :pageData="pageData" @updateFn="getTableData" />
          </div>
        </div>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
  import LogTable from './components/log.vue';
  import OrderTable from './components/order.vue';
  import RewardTable from './components/reward.vue';
  export default {
    components: {
      LogTable,
      OrderTable,
      RewardTable,
    },
  };
</script>

<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../commission.service';
  import { useModal } from '@/sheep/hooks';
  import { useHandle } from './data';
  import { composeFilter } from '@/sheep/utils';
  import { usePagination } from '@/sheep/hooks';
  import AgentLevel from './level.vue';
  import changeParent from './changeParent.vue';
  import AgentTeam from './team.vue';
  import { cloneDeep } from 'lodash';

  const props = defineProps(['modal']);

  const state = reactive({
    detailData: {},

    applyInfo: {},
    applyInfoFlag: false,
  });

  async function getDetail() {
    const { error, data } = await api.agent.detail(props.modal.params.id);
    if (error === 0) {
      state.detailData = data;
      state.applyInfo = cloneDeep(state.detailData.apply_info);
    }
  }

  const { statusList, onEdit } = useHandle(() => getDetail());
  function onChangeStatus(status) {
    onEdit(state.detailData.user_id, { status });
  }

  function onChangeLevel() {
    useModal(
      AgentLevel,
      {
        title: '更换分销等级',
        level: state.detailData.level,
      },
      {
        confirm: (level) => {
          onEdit(state.detailData.user_id, { level });
        },
      },
    );
  }

  function onChangeParentAgent() {
    useModal(
      changeParent,
      {
        title: '更换上级分销商',
        id: state.detailData?.user_id,
      },
      {
        confirm: (res) => {
          getDetail();
        },
      },
    );
  }

  function onDeleteApplyInfo(index) {
    state.applyInfo.splice(index, 1);
  }
  function onCancelApplyInfo() {
    state.applyInfo = cloneDeep(state.detailData.apply_info);
    state.applyInfoFlag = false;
  }
  function onSaveApplyInfo() {
    onEdit(state.detailData.user_id, { apply_info: state.applyInfo });
    state.applyInfoFlag = false;
  }

  function onViewTeam() {
    useModal(AgentTeam, {
      title: '查看团队',
      id: state.detailData.user_id,
    });
  }

  const tabs = reactive({
    current: 'log',
    tableData: [],
  });

  const { pageData } = usePagination();

  async function getTableData(page) {
    if (page) pageData.page = page;
    let search = composeFilter({ agent_id: state.detailData.user_id }, {});
    const { error, data } = await api[tabs.current].list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      if (tabs.current == 'order') {
        tabs.tableData = data.list.data;
        pageData.page = data.list.current_page;
        pageData.list_rows = data.list.per_page;
        pageData.total = data.list.total;
      } else {
        tabs.tableData = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
      }
    }
  }

  function onChangeTabsCurrent() {
    tabs.tableData = [];
    getTableData(1);
  }

  onMounted(async () => {
    await getDetail();
    getTableData();
  });
</script>
<style lang="scss" scoped>
  .agent-detail {
    .el-main {
      padding: 20px 0;
      .el-scrollbar {
        padding: 0 20px;
      }
    }
    .el-form {
      :deep() {
        .el-form-item {
          margin-bottom: 8px;
        }
        .el-form-item__label {
          color: var(--sa-subfont);
        }
      }
    }
    @media screen and (max-width: 992px) {
      .user-content,
      .apply-content {
        :deep() {
          .el-form-item__label {
            margin-bottom: 0;
            text-align: right;
          }
        }
      }
      .user-form,
      .apply-form {
        :deep() {
          .el-form-item {
            display: flex;
          }
        }
      }
    }
    .sa-delete {
      height: 24px;
    }
    .agent-content {
      overflow: hidden;
      .grid-content {
        background: var(--sa-table-header-bg);
        padding: var(--sa-padding);
        border-radius: 8px;
        min-height: 450px;
        margin: 0 0 20px;
        .title {
          height: 18px;
          line-height: 18px;
          font-size: 14px;
          font-weight: 500;
          color: var(--sa-title);
          margin-bottom: 16px;
          overflow: hidden;
        }
        &.user-content {
          .refresh {
            line-height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: var(--sa-font);
            cursor: pointer;
            .el-icon {
              font-size: 16px;
            }
          }
          .nickname {
            line-height: 22px;
            font-size: 16px;
            font-weight: 500;
            color: var(--sa-subtitle);
          }
          .commission-item {
            width: 30%;
            line-height: 18px;
            font-size: 14px;
            font-weight: 500;
            .title {
              height: 24px;
              line-height: 24px;
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 4px;
            }
          }
        }

        &.apply-content {
          .apply-status {
            padding-bottom: 24px;
            margin-bottom: 0;
            border-bottom: 1px dashed var(--sa-border);
          }
          .sa-image {
            width: 140px;
            height: 90px;
          }
        }

        &.dashboard-content {
          & > .el-col {
            border-bottom: 1px dashed var(--sa-border);
            margin-bottom: 16px;
            padding-bottom: 8px;
            &:last-of-type {
              border-bottom: none;
              margin-bottom: 0;
              padding-bottom: 0;
            }
          }
          .item {
            margin-bottom: 16px;
            .label {
              line-height: 16px;
              font-size: 12px;
              font-weight: 400;
              color: var(--sa-subfont);
              margin-bottom: 8px;
              display: flex;
              align-items: center;

              .warning {
                line-height: 16px;
                font-size: 12px;
                color: var(--el-color-warning);
              }
            }
            .content {
              line-height: 22px;
              font-size: 18px;
              font-weight: 500;
              color: var(--sa-font);
            }
            .unit {
              font-size: 12px;
              font-weight: 400;
              color: var(--sa-font);
              margin-left: 4px;
            }
          }
        }
      }
    }

    .agent-table {
      :deep() {
        .el-tabs__nav-wrap::after {
          height: 0;
        }
      }
    }
  }
  :deep() {
    .status {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      cursor: pointer;
    }
  }
</style>
